window.addEventListener('DOMContentLoaded', function() {
    // 获取元素
    const focus = document.querySelector('.focus');
    const ul = focus.children[0];
    const ol = focus.children[1];

    // 自动轮播
    let index = 0;
    let timer = setInterval(function() {
        index++;
        ul.style.transition = 'all .3s';
        ul.style.transform = `translateX(${- index * focus.offsetWidth}px)`;
    }, 2000);

    // 生成圆点
    for(let i = 0; i < ul.children.length; i++) {
        let li = document.createElement('li');
        ol.appendChild(li);
    }
    ol.children[0].className = 'current';

    // 元素克隆
    let first = ul.children[0];
    let last = ul.children[ul.children.length - 1];
    ul.insertBefore(last.cloneNode(true), first);
    ul.appendChild(first.cloneNode(true));

    // 监听过渡完成
    focus.addEventListener('transitionend', function() {
        // 最后一张
        // 因为ul子元素克隆缘故，使用ol拿索引
        if (index > ol.children.length - 1) {
            index = 0;
            // 去除过渡效果
            ul.style.transition = 'none';
            ul.style.transform = `translateX(${- index * focus.offsetWidth}px)`;
        }
        // 第一张
        if (index < 0) {
            index = ol.children.length - 1;
            // 去除过渡效果
            ul.style.transition = 'none';
            ul.style.transform = `translateX(${- index * focus.offsetWidth}px)`;
        }
        // 小圆点选中
        ol.querySelector('.current').classList.remove('current');
        ol.children[index].classList.add('current');
    });

    // 手指滑动
    let startX = 0; //初始位置
    let moveX = 0; //移动距离
    let flag = false; //节流阀
    // 手指触摸
    focus.addEventListener('touchstart', function(e) {
        startX = e.targetTouches[0].pageX;
        // 关闭定时器
        clearInterval(timer);
    });
    // 手指滑动
    focus.addEventListener('touchmove', function(e) {
        e.preventDefault();
        // 滑动距离
        moveX = e.targetTouches[0].pageX - startX;
        ul.style.transition = 'none';
        ul.style.transform = `translateX(${- index * focus.offsetWidth + moveX}px)`;
        flag = true;
    });
    // 手指离开
    focus.addEventListener('touchend', function(e) {
        // 有过滑动后
        if (flag) {
            // 滑动距离超过50px时
            if (Math.abs(moveX) > 50) {
                if (moveX > 0) {
                    index--;
                } else {
                    index++;
                }
                ul.style.transition = 'all .3s';
            } else {
                ul.style.transition = 'all .1s';
            }
            ul.style.transform = `translateX(${- index * focus.offsetWidth}px)`;
        }
        // 开启定时器
        clearInterval(timer);
        timer = setInterval(function() {
            index++;
            ul.style.transition = 'all .3s';
            ul.style.transform = `translateX(${- index * focus.offsetWidth}px)`;
        }, 2000);
    })
});